<template>
  <div class="tag_auto_complete_wrap">
    <multiselect
      v-model="selected"
      :multiple="true"
      placeholder="添加标签"
      :taggable="true"
      @tag="addTag"
      label="tag"
      @search-change="searchChange"
      track-by="id"
      :options="tags">
      <span slot="noResult">
        没有结果
      </span>
    </multiselect>
    <!-- <multiselect v-model="tags" :options="allTag" :multiple="true" :searchable="true" :hide-selected="true" :close-on-select="false"
                 :clear-on-select="false" :limit="5" :placeholder="$t('form.select_tag')" label="tag" track-by="tag"></multiselect> -->
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  import 'vue-multiselect/dist/vue-multiselect.min.css';
  export default {
    components: { Multiselect },
    props: {
      oldTags: {
        type: Array,
        default: () => {
          return [];
        }
      }
    },
    data () {
      return {
        selected: this.oldTags,
        tags: []
      };
    },
    watch: {
      selected (newVal) {
        console.log('tag-auto-complete-watch-select')
        console.log(newVal[0].id)
        this.$emit('tag_ids', newVal.map(item => item.id));
      },
      oldTags (newVal) {
        console.log('tag-auto-complete-oldTags-select')
        console.log(newVal)
        this.selected = newVal;
      }
    },
    methods: {
      searchChange (query) {
        this.$http.get('/tags', {
          params: {
            keywords: query
          }
        }).then(res => {
          this.tags = res.data.data;
          console.log(this.tags)
        });
      },
      addTag (newTag) {
        let newTagInTags = this.tags.find(item => item.tag === newTag);
        if (newTagInTags) {
          console.log(newTagInTags)
          this.selected.push(newTagInTags);
        } else {
          this.$http.post('tag', {
            tag: newTag,
            title: newTag,
          }).then(res => {
            this.selected.push(res.data.data);
          });
        }
      }
    },
    mounted () {
    }
  };
</script>

<style scoped lang="less">
  .tag_auto_complete{
    display: inline-block;
    height: 26px;
    width: 100px;
    color: #495060;
    border: 1.5px dashed #999;
    padding: 3px;
    padding-left: 20px;
    position: relative;
    border-radius: 3px;
    &:hover{
      border-color: #1d90e6;
      .icon {
        color: #1d90e6!important;
      }
    }
    .icon {
      position: absolute;
      top: 5px;
      left: 5px;
    }
    >input{
      outline: none;
      display: block;
      border: none;
      width: 100%;
      height: 100%;
    }
  }
</style>
